<template>
	<div class="search-outer">
		<div class="search-body">
			<div class="icon">
				<slot>图标显示区域(后退按钮用 class为back,签到的calss为sigin)</slot>
			</div>
			<div class="search">
				<span class="fa fa-search"></span>
				<slot name="inputs">
					<input type="text" placeholder="搜索" @focus.prevent="rougerEmit()">
				</slot>
			</div>
		<div class="sousuo">
			<slot name="action"></slot>
		</div>
	</div>
	</div>
</template>

<script>
export default {
  name: 'searchHead',
  methods: {
  	rougerEmit: function(){
  		this.$emit('to-search');
  	}
  }
}
</script>

<style lang="scss" scoped>
	.search-outer {
		width: 100%;
		height: 44px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 300;
		background: #fff;
	}
	.search-body {
		width: 100%;
		height: 44px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		&>div {
			height: 44px;
			line-height: 44px;
		}
		& .icon {
			width: 12%;
			display: flex;
			justify-content: center;
			align-items: center;
			& .sigin {
				width: 20px;
				height: 20px;
				background: url('../assets/img/lease/title-signin.png') 0 0  no-repeat;
				background-size: 100%;
			}
			& .back	{
				width: 20px;
				height: 20px;
				background: url('../assets/img/pers/arrow.png') 0 0  no-repeat;
				transform: rotate(180deg);
				background-size: 50%;
				background-position: 6px 2px;
			}
		}
		& .sousuo {
			width: 11%;
			padding-left: 6px;
			font-size: 14px;
			color: #666;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 5px;
		}
		& .search {
			width: 77%;
			overflow: hidden;
			position: relative;
			&>span {
				color: #999;
				position: absolute;
				top: 15px;
				left: 8px;
			}
			&>input {
				display: table-cell;
				width: 100%;
				padding-left: 30px;
				background: #f6f6f6;
				height: 26px;
			}
		}
	}
</style>